<template>
  <div>
    <div v-show="currIndex === 0">
      <el-table :data="shopList" style="width: 100%">
        <el-table-column label="序号" width="85" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="item.label"
          v-for="item in this.shopTable"
          :key="item.prop"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row[item.prop] | filterShop(item.prop) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-zoom-in"
              @click="addCart(scope.row)"
            >加入购物车</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-show="currIndex === 1">
      <el-dialog title="编辑" :visible.sync="togger" :show-close="false">
        <el-form :model="shop">
          <el-form-item label="课程名称">
            <el-input v-model="shop.name" placeholder="课程名称"></el-input>
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="shop.price" placeholder="价格"></el-input>
          </el-form-item>
          <el-form-item label="单位">
            <el-select v-model="shop.unit" placeholder="单位">
              <el-option label="课时" value="课时"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="shop.date"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="esc">取 消</el-button>
          <el-button type="primary" @click="saveShop">确 定</el-button>
        </div>
      </el-dialog>
      <el-form :inline="true" :model="shop" class="demo-form-inline">
        <el-form-item label="课程名称">
          <el-input v-model="shop.name" placeholder="课程名称"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="shop.price" placeholder="价格"></el-input>
        </el-form-item>
        <el-form-item label="单位">
          <el-select v-model="shop.unit" placeholder="单位">
            <el-option label="课时" value="课时"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="shop.date"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addShop">添加</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="shopList" style="width: 100%">
        <el-table-column label="序号" width="85" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="item.label"
          v-for="item in this.shopTable"
          :key="item.prop"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row[item.prop] | filterShop(item.prop) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" icon="el-icon-edit" @click="editShop(scope.$index)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="delShop(scope.$index)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-show="currIndex === 2">
      <el-table
        :data="cartShopList"
        :summary-method="getTotalPrice"
        show-summary
        style="width: 100%"
      >
        <el-table-column label="序号" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="课程名称" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单价" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.price | cartPrice(scope.row)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.unit }}</span>
          </template>
        </el-table-column>
        <el-table-column label="出版日期" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column label="购买数量" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-remove-outline"
              circle
              @click="subShopCart(scope.$index)"
            ></el-button>
            <span>{{ scope.row.count }}</span>
            <el-button
              type="danger"
              icon="el-icon-circle-plus-outline"
              circle
              @click="addShopCart(scope.$index)"
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column label="金额" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.total | cartPrice(scope.row)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="delCart(scope.$index)"
            >移除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-show="currIndex === 3">
      <el-carousel indicator-position="outside">
        <el-carousel-item v-for="item in imaList" :key="item.id">
          <img :src="item.src" alt />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  computed: {
    cartShopList() {
      let cartShop = this.$store.state.cart.cartList;
      cartShop.map(item => {
        item.total = item.price * item.count;
      });
      return cartShop;
    }
  },
  props: {
    currIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      imaList: [
        {
          id: 1,
          src:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594496680576&di=d050c135e140bc9c3bc2d1ef1604967d&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fbd4664e2e677e9689b82cfa962a7aba30cb219b21e4ec-adZbKE_fw658"
        },
        {
          id: 2,
          src:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2786034744,2260211435&fm=26&gp=0.jpg"
        },
        {
          id: 3,
          src:
            ""
        },
        {
          id: 4,
          src:
            "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1615036419,2809871824&fm=26&gp=0.jpg"
        }
      ],
      togger: false,
      selectIndex: "",
      shop: {
        name: "",
        price: "",
        unit: "",
        date: "",
        count: 0
      },
      shopTable: [
        {
          prop: "name",
          label: "课程名称",
          width: ""
        },
        {
          prop: "price",
          label: "单价",
          width: ""
        },
        {
          prop: "unit",
          label: "单位",
          width: ""
        },
        {
          prop: "date",
          label: "创建时间",
          width: ""
        }
      ],
      shopList: []
    };
  },
  methods: {
    saveShop() {
      this.togger = false;
      this.shopList[this.selectIndex] = this.shop;
    },
    esc() {
      this.togger = false;
      this.shop = {};
    },
    editShop(i) {
      this.selectIndex = i;
      this.togger = true;
      this.shop = this.shopList[i];
    },
    delShop(i) {
      this.shopList.splice(i, 1);
      this.$message.success("删除成功！");
    },
    addShop() {
      this.shopList.unshift(this.shop);
      this.shop = {};
      this.creTime = "";
    },
    getTotalPrice(param) {
      const { columns, data } = param;
      console.log(param);
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += " 元";
        } else {
          sums[index] = "N/A";
        }
      });
      return sums;
    },
    getShopData() {
      this.$http.get("/shop/getList").then(res => {
        res = res.data;
        this.shopList = res.data;
      });
    },
    ...mapMutations({
      addClickCart: "addCartCount"
    }),
    addShopCart(i) {
      this.addClickCart(i);
    },
    ...mapMutations({
      subClickCart: "subCartCount"
    }),
    subShopCart(i) {
      this.subClickCart(i);
    },
    addCart(row) {
      let status = this.$store.state.cart.cartList.findIndex(
        item => item.name === row.name
      );
      if (status == -1) {
        this.$store.commit("setCartList", row);
        this.$message.success("添加购物车成功！");
      } else {
        this.$message.error("该商品已添加至购物车！");
      }
    },
    delCart(i) {
      this.$store.commit("delShopCart", 1);
    }
  },
  created() {
    this.getShopData();
  },
  filters: {
    filterShop(row, prop) {
      if (prop === "price") {
        return "￥" + parseFloat(row).toFixed(2) + "元";
      } else {
        return row;
      }
    },
    cartPrice(row) {
      return "￥" + parseFloat(row).toFixed(2) + "元";
    }
  }
};
</script>
<style lang="scss" scoped>
.el-button.is-circle {
  padding: 8px;
  margin-right: 10px;
  margin-left: 10px;
}
form.el-form.demo-form-inline.el-form--inline {
  display: flex;
  justify-content: space-around;
}
img {
  width: 100%;
}
</style>